<template>
    <div class="member-add">
        <div class="member-add-card">
            <Row :gutter="16">
                <Col span="12">
                    <Card>
                        <p slot="title">
                            <a>
                                <Icon type="gear-a"></Icon>
                                基本信息</a>
                        </p>
                        <div class="formCon">
                            <a class="title">{{title}}</a>
                            <Form ref="formValidate" :model="formValidate" :label-width="70" style="margin-top: 20px">
                                <FormItem label="买方用户名">
                                    <Input v-model="icecream.buy_name" placeholder="" readonly></Input>
                                </FormItem>
                                <FormItem label="卖家用户名">
                                    <Input v-model="icecream.sell_name" placeholder="" readonly></Input>
                                </FormItem>
                                <FormItem label="交易总量">
                                    <Input v-model="icecream.num" placeholder="" readonly></Input>
                                </FormItem>
                                <FormItem label="当前状态">
                                    <Input v-model="nowStatus" placeholder="" readonly></Input>
                                </FormItem>
                                <FormItem label="价格">
                                    <Input v-model="icecream.price" placeholder="" readonly></Input>
                                </FormItem>
                                <FormItem label="总价">
                                    <Input v-model="icecream.total" placeholder="" readonly></Input>
                                </FormItem>
                                <FormItem label="买入币种">
                                    <Input v-model="icecream.buy" placeholder="" readonly></Input>
                                </FormItem>
                                <FormItem label="卖出币种">
                                    <Input v-model="icecream.sell" placeholder="" readonly></Input>
                                </FormItem>
                                <FormItem label="匹配时间">
                                    <Input v-model="add_time" placeholder="" readonly></Input>
                                </FormItem>
                                <FormItem label="打款时间">
                                    <Input v-model="pay_time" placeholder="" readonly></Input>
                                </FormItem>
                                <FormItem label="收款时间">
                                    <Input v-model="get_time" placeholder="" readonly></Input>
                                </FormItem>

                                <FormItem label="订单号">
                                    <Input v-model="icecream.trade_no" placeholder="" readonly></Input>
                                </FormItem>
                                <FormItem label="支付方式">
                                    <Input v-model="pay_way" readonly></Input>
                                </FormItem>
                            </Form>
                            <p slot="title" style="margin: 20px 0">
                                <a>
                                    <Icon type="ios-cloud-upload-outline"></Icon>
                                    收款信息</a>
                            </p>
                            <Form :label-width="70" style="margin-top: 20px">
                                <FormItem label="卡号">
                                    <Input v-model="bankList.number" placeholder="" readonly></Input>
                                </FormItem>
                                <FormItem label="收款人">
                                    <Input v-model="bankList.name" placeholder="" readonly></Input>
                                </FormItem>
                                <FormItem label="开户行" v-if="bankList.bank">
                                    <Input v-model="bankList.bank" placeholder="" readonly></Input>
                                </FormItem>
                                <FormItem label="开户行地址" v-if="bankList.bank_address">
                                    <Input v-model="bankList.bank_address" placeholder="" readonly></Input>
                                </FormItem>
                            </Form>
                            <div class="img_style">
                                <p style="margin: 10px 0;font-size: 14px">收款码</p>
                                <img v-if="bankList.image" :src="bankList.image" alt="">
                            </div>
                            <div class="img_style" v-if="icecream.pic">
                                <p style="margin: 10px 0;font-size: 14px">打款凭证</p>
                                <img v-if="icecream.pic" :src="icecream.pic" alt="">
                            </div>

                            <!--<div v-if="status === '0' || status === '3' || status === '5'" slot="footer">-->
                            <!--<Button type="primary" size="large" long :loading="modal_loading"-->
                            <!--@click="openRemark(1)">确认完成-->
                            <!--</Button>-->
                            <!--</div>-->
                            <!--<div v-if="status === '0' || status === '3' || status === '5'" slot="footer">-->
                            <!--<Button style="margin-top: 10px" type="error" size="large" long :loading="modal_loading"-->
                            <!--@click="openRemark(2)">取消订单-->
                            <!--</Button>-->
                            <!--</div>-->
                        </div>
                    </Card>
                </Col>
                <Col span="12">
                    <Card>
                        <p slot="title">
                            <a>
                                <Icon type="ios-cloud-upload-outline"></Icon>
                                申诉</a>
                        </p>
                        <div v-if="appeal.username!=''">

                            <Form ref="formValidate" :model="formValidate" :label-width="70" style="margin-top: 20px">
                                <FormItem label="申诉人">
                                    <Input v-model="appeal.username" placeholder="" readonly></Input>
                                </FormItem>
                                <FormItem label="申诉内容">
                                    <Input type="textarea" v-model="appeal.content" placeholder="" readonly></Input>
                                </FormItem>

                            </Form>
                            <div class="img_style">
                                <p style="font-size: 14px">申诉图片1</p>
                                <img v-if="appeal.img1" :src="appeal.img1" alt="">
                                <p style="font-size: 14px">申诉图片2</p>
                                <img v-if="appeal.img2" :src="appeal.img2" alt="">
                                <p style="font-size: 14px">申诉图片3</p>
                                <img v-if="appeal.img3" :src="appeal.img3" alt="">
                            </div>
                        </div>
                        <!--<Upload accept="image/png, image/jpeg, image/gif, image/jpg" type="drag" action="?" :before-upload="handleBeforeUpload">-->
                        <!--<div class="upImg">-->
                        <!--<a><Icon type="ios-cloud-upload" size="52"></Icon></a>-->
                        <!--<p>点击或将图片拖拽到这里上传</p>-->
                        <!--</div>-->
                        <!--</Upload>-->
                        <!--</Card>-->
                        <!--<Card style="height: 312px;margin-top: 20px">-->
                        <!--<p slot="title">-->
                        <!--<a><Icon type="ios-person"></Icon> 头像展示</a>-->
                        <!--</p>-->
                        <!--<a slot="extra" @click="imgUrl = ''"><Icon type="close"></Icon>清除</a>-->
                        <!--<img class="imgUp" v-if="imgUrl!=''" :src="imgUrl"/>-->
                    </Card>
                </Col>
                <Col span="12">
                    <Card>
                        <p slot="title">
                            <a>
                                <Icon type="ios-cloud-upload-outline"></Icon>
                                流程</a>
                        </p>
                        <div class="" >
                            <table border = '1'>
                                <tr>
                                    <td>内容</td>
                                    <td>时间</td>
                                </tr>
                                <tr v-for="item in sort">
                                    <td>{{item[0]}}</td>
                                    <td>{{ timeFormat(item[1]) }}</td>
                                </tr>
                            </table>
                        </div>
                    </Card>
                </Col>
            </Row>
            <!--提交-->
            <div class="subCon">
                <ButtonGroup>
                    <Button v-if="status === '0' || status === '3' || status === '5'" long type="primary"
                            @click="openRemark(1)" :loading="loading">确认完成
                    </Button>
                    <Button v-if="status === '0' || status === '3' || status === '5'" long type="error"
                            @click="openRemark(2)" :loading="loading">取消订单
                    </Button>
                </ButtonGroup>
            </div>
        </div>
        <Modal v-model="remarkModal" width="200">
            <p slot="header" style="text-align:center">
                <a>注意</a>
            </p>
            <div v-if="remark==1">
                1.适用于卖家已收款,但是未点击收款按钮
                <br>
                2.选择此操作后交易单会被完成,卖家会被扣款 如果账户内代币不足 账号会被冻结
            </div>
            <div v-if="remark==2">
                1.适用于未打款但是点击了打款按钮
                <br>
                2. 选择此操作后 交易单会被取消,卖单会恢复成挂卖状态 买家会被扣款 如果账户内代币不足 账号会被冻结
            </div>
            <div slot="footer">
                <Button type="primary" size="large" long :loading="modal_loading"
                        @click="remark==1?sureOrder(2):sureOrder(1)">{{remark==1?'确认完成订单':'确认取消订单'}}
                </Button>
            </div>
            <div style="margin-top: 10px" slot="footer">
                <Button type="error" size="large" long :loading="modal_loading" @click="remarkModal = false">取消操作
                </Button>
            </div>
        </Modal>
<!--        <Modal v-model="remarkModa2" width="200">

        </Modal>-->
    </div>

</template>
<script>
    export default {
        name: "c2cDetails",
        data() {
            const validateNum = (rule, value, callback) => {
                if (!value) {
                    return callback(new Error('请输入数字'));
                }
                // 模拟异步验证效果
                setTimeout(() => {
                    if (!Number.isInteger(value)) {
                        callback(new Error("请输入数字"));
                    } else {
                        callback();
                    }
                }, 1000);
            };
            return {
                title: "订单详情",
                add_time: '',
                nowStatus: '',
                pay_time: '',
                get_time: '',
                bankList: [],
                formValidate: {
                    name: "",
                    pwd: "",
                    /*twopwd:"",*/
                    username: "",
                    sex: "1",
                    phone: "",
                    email: "",
                    // shangji:"",
                    // tuanbei:"",
                    // dengji:"1",
                    status: "99",
                    level: '1',
                    real_name: '',
                    birthday: '',
                    tuijian_name: ''
                },
                columns3: [
                    {
                        type: 'index',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: '内容',
                        key: '0'
                    },
                    {
                        title: '时间',
                        key: '1'
                    },
                ],
                ruleValidate: {
                    name: [{required: true, message: '请输入账号', trigger: 'blur'}],
                    pwd: [{required: false, message: '请输入密码', trigger: 'blur'}],
                    twopwd: [{required: false, message: '请输入密码', trigger: 'blur'}],
                    username: [{required: true, message: '请输入用户名', trigger: 'blur'}],
                    sex: [{required: true, message: '请选择性别', trigger: 'change'}],
                    phone: [{required: true, message: '请输入手机号码', trigger: 'blur'}],
                    email: [{required: false, message: '请输入电子邮箱', trigger: 'blur'}],
                    tuijian_name: [{required: false, message: '请输入推荐人', trigger: 'blur'}],
                    // shangji: [{ required: true, message: '请输入上级推手', trigger: 'blur' }],
                    // tuanbei: [{ required: true, validator: validateNum, trigger: 'blur' }],
                    level: [{required: true, message: '请选择等级', trigger: 'change'}],
                    status: [{required: true, message: '请选转状态', trigger: 'change'}],
                },
                imgUrl: "",
                loading: false,
                isEdit: false,
                id: "",
                status: '',
                pay_way: '',
                trade_id: '',
                remark: '',
                icecream: [],
                buy_status:'',
                sort:[
                 /*   {
                        name:'',
                        abc:''
                    }*/
                ],
                remarkModal: false,
                modal_loading:false,
                remarkModa2:false,
                appeal: {
                    username: '',
                    content: '',
                    img1: '',
                    img2: '',
                    img3: '',
                },
            }
        },
        mounted() {
            this.trade_id = this.$route.query.trade_id
            this.status = this.$route.query.status

            this.id = this.$route.query.id
            this.getData()
        },
        methods: {
            getData() {
                this.getJsonData("Trade/getC2CDetails", {
                    trade_id: this.trade_id,
                    id: this.id
                }).then((res) => {
                    this.bankList = res.bank
                    this.icecream = res.data
                    this.sort = JSON.parse(res.data.sort)
               /*     for (var i = 0 ; i<this.sort.length;i++){
                        // console.log(this.sort[i][0])
                        this.sort.push({name:this.sort[i][0],abc:this.sort[i][0]})
                        console.log(this.sort)
                        return;
                    }*/

                    //
                    this.add_time = res.data.add_time == 0 ? '暂无' : this.timeFormat(res.data.add_time)
                    this.pay_time = res.data.buy_addtime == 0 ? '暂无' : this.timeFormat(res.data.buy_addtime)
                    this.get_time = res.data.sell_addtime == '0' ? '暂无' : this.timeFormat(res.data.sell_addtime)
                    if (this.icecream.pay_type == 1) {
                        this.pay_way = '银行卡'
                    }
                    else if (this.icecream.pay_type == 2) {
                        this.pay_way = '支付宝'
                    }
                    else if (this.icecream.pay_type == 3) {
                        this.pay_way = '微信'
                    }
                    this.buy_status = res.data.buy_status
                    this.sell_status = res.data.sell_status
                    this.status = res.data.status
                    if (this.status == 0 && this.buy_status == 0 && this.sell_status == 0) {
                        this.nowStatus = '待付款'
                    }
                    else if (this.status == 0 && this.buy_status == 1 && this.sell_status == 0) {
                        this.nowStatus = '待放行'
                    }
                    else if (this.status == 1) {
                        this.nowStatus = '已完成'
                    }
                    else if (this.status == 2) {
                        this.nowStatus = '已撤销'
                    }
                    else if (this.status == 3) {
                        this.nowStatus = '申诉'
                    }
                    else if (this.status == 4) {
                        this.nowStatus = '超时撤销'
                    }
                    else if (this.status == 5) {
                        this.nowStatus = '申诉中'
                    }

                    this.appeal.username = res.appeal.username
                    this.appeal.content = res.appeal.content
                    this.appeal.img1 = res.appeal.img1
                    this.appeal.img2 = res.appeal.img2
                    this.appeal.img3 = res.appeal.img3
                })
            },
            sureOrder(n) {
                this.modal_loading = true;
                this.getJsonData("Trade/comfirmC2C", {
                    id: this.id,
                    trade_id: this.trade_id,
                    type:n
                }, true)
                    .then((res) => {
                        // this.getOrderList()
                        this.modal_loading = false;
                        this.remarkModal = false;
                        this.$Message.success("操作成功");
                        this.$router.push({name:'c2cTransfer-list-new'})
                    }).catch((res) => {
                    this.modal_loading = false;
                    this.remarkModal = false;
                })
            },
            openRemark(n) {
                this.remark = n
                setTimeout(() => {
                    this.remarkModal = true
                }, 100)
            },
            // handleBeforeUpload(file) {
            //     if ((Math.round(file.size / 1024 * 100) / 100) < 2000) {
            //         this.caijianImg(file)
            //     } else {
            //         this.$Notice.error({
            //             title: '文件过大',
            //             desc: '文件 ' + file.name + '/' + (Math.round(file.size / 1024 * 100) / 100) + 'KB' + '，请上传 2M 以内的图片。',
            //             duration: 4.5
            //         });
            //     }
            //     //禁止默认上传
            //     return false
            // },
            // caijianImg(file) {
            //     let reader = new FileReader();
            //     reader.onload = () => {
            //         this.upImg(reader.result)
            //         reader.onload = null;
            //     };
            //     reader.readAsDataURL(file);
            // },
            // upImg(image) {
            //     this.upBaseImg("User/uploadPic", {image})
            //         .then((res) => {
            //             this.imgUrl = res.url
            //         })
            // },
            sub() {
                this.$refs.formValidate.validate((valid) => {
                    if (valid) {
                        this.sureSub()
                    }
                })
            },
            sureSub() {
                /*if(this.imgUrl=="")
                {
                    this.$Message.warning("请上传头像");
                    return;
                }*/
                this.loading = true;
                let obj = {
                    tuijian_name: this.formValidate.tuijian_name,
                    name: this.formValidate.name,
                    pwd: this.formValidate.pwd,
                    /*twopwd:this.formValidate.twopwd,*/
                    sex: this.formValidate.sex,
                    username: this.formValidate.username,
                    phone: this.formValidate.phone,
                    pic: this.imgUrl,
                    status: this.formValidate.status,
                    email: this.formValidate.email,
                    real_name: this.formValidate.real_name,
                    level: this.formValidate.level,
                    year: this.formValidate.birthday.split("-")[0],
                    month: this.formValidate.birthday.split("-")[1],
                    day: this.formValidate.birthday.split("-")[2],
                };
                if (this.isEdit) this.$set(obj, "uid", this.uid)
                this.getJsonData("User/addUser", obj, true)
                    .then((res) => {
                        this.loading = false
                        this.$Message.success(this.isEdit ? '修改成功' : '新增成功')

                    })
                    .catch((res) => {
                        this.loading = false
                    })
            },
            reset() {
                this.imgUrl = ""
                this.$refs.formValidate.resetFields();
            }
        }
    }
</script>
<style lang="less">
    @import "./c2cDetails";
    table {/*样式实现表格居中*/
        border-collapse:collapse;
        width:600px;
        line-height: 40px;
        margin-bottom: 0px;
        margin-top: 0px;
        margin-right:auto;
        margin-left: auto;
        text-align: center;
    }
</style>